
import React, { useEffect, useState } from "react";
import * as echarts from "echarts";
import { $AddZero, $eventBus, $ScientificNotation } from "../../../../../../common/utils";
import lessModule from "./index.module.less";
import { $Http } from "../../../../../../network";

// 主页-变电站能耗页面-能耗统计页面-图表组件-叠积柱状图
interface energyConsumptionStatisticsPageEchartsComponentEchartsStackBarComponentInterface {
    sourceData: object
}
const EnergyConsumptionStatisticsPage_EchartsComponent_EchartsStackBarComponent: React.FC<energyConsumptionStatisticsPageEchartsComponentEchartsStackBarComponentInterface> = (props) => {
    let echartsStackBar: echarts.ECharts
    const init_echarts = () => {
        echartsStackBar = echarts.init(document.getElementById("echartsStackBar") as HTMLElement)
        window.addEventListener("resize", () => {
            echartsStackBar.resize();
        })
        draw_echarts()
    }
    const draw_echarts = () => {
        const option = {
            title: {
                text: "电度 （kW·h）",
                left: 24,
                top: 37,
                textStyle: {
                    fontSize: 14,
                    fontWeight: 400,
                    color: "#B8D6E6",
                },
            },
            tooltip: {
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                formatter(params: object) {
                    return `
                        <div class="${lessModule["energyConsumptionStatisticsPageEchartsComponent-energyConsumptionStatisticsPageEchartsComponentEchartsStackBarComponent__tooltip"]}">
                            <span>${params["name"]}</span>
                            <div class="${lessModule["energyConsumptionStatisticsPageEchartsComponentEchartsStackBarComponent-tooltip__row"]}">
                                <div class="${lessModule["tooltip-row__legend"]} ${lessModule[`tooltip-row__legend${params["componentIndex"] ? 0 : 1}`]}"></div>
                                <div class="${lessModule["tooltip-row__seriesName"]}">${params["seriesName"]}</div>
                                <div>${params["value"]}</div>
                            </div>
                        </div>`
                },
            },
            legend: {
                data: ["变压器损耗电度", "低压进线电度"],
                right: "24px",
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    // 图例文字的样式
                    color: "#8FB8CC",
                    fontSize: "12px",
                },
            },
            grid: {
                top: 80,
                left: 76,
                bottom: 71,
                right: 0,
            },
            xAxis: {
                type: "category",
                data: props.sourceData?.["date"],
                axisLabel: {
                    align: "left",
                    color: "#7A8F99",
                    showMinLabel: true,
                    showMaxLabel: true,
                    margin: 30,
                    formatter: (() => {
                        return (item: object, idx: number) => {
                            const isLast = idx === props.sourceData?.["date"]?.length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: 3,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
                axisLabel: {
                    color: "#7A8F99",
                },
            },
            series: [
                {
                    data: props.sourceData?.["total_enery"]?.["t_total"],
                    name: "低压进线电度",
                    type: "bar",
                    stack: "one",
                    barWidth: 20,
                    itemStyle: {
                        //颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 1, color: "rgba(0, 0, 0, 0.5)" },
                            { offset: 0.7, color: "rgba(90, 216, 166, 0.5)" },
                            { offset: 0, color: "rgba(90, 216, 166, 0.9)" },
                        ]),
                        borderColor: "rgba(90, 216, 166, 1)",
                        borderWidth: 1,
                    },
                },
                {
                    data: props.sourceData?.["total_enery"]?.["transformer_engery"],
                    name: "变压器损耗电度",
                    type: "bar",
                    stack: "one",
                    barWidth: 20,
                    itemStyle: {
                        //颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 1, color: "rgba(0, 0, 0, 0.5)" },
                            { offset: 0.7, color: "rgba(91, 143, 249, 0.5)" },
                            { offset: 0, color: "rgba(91, 143, 249, 0.9)" },
                        ]),
                        borderColor: "rgba(91, 143, 249, 1)",
                        borderWidth: 1,
                    },
                },
            ],
        };

        echartsStackBar.setOption(option);
    }



    // 初始化
    useEffect(() => {
        init_echarts()
        // 销毁
        return () => {
            echartsStackBar?.dispose()
        }
    }, [props.sourceData])
    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-energyConsumptionStatisticsPageEchartsComponent__energyConsumptionStatisticsPageEchartsComponentEchartsStackBarComponent"]}`} id="echartsStackBar" ></div>
    )
}

// 主页-变电站能耗页面-能耗统计页面-图表组件-柱状图
interface energyConsumptionStatisticsPageEchartsComponentEchartsBarComponentPropsInterface {
    sourceData: object
}
const EnergyConsumptionStatisticsPage_EchartsComponent_EchartsBarComponent: React.FC<energyConsumptionStatisticsPageEchartsComponentEchartsBarComponentPropsInterface> = (props) => {
let [echartsList,setEchartsList] = useState<Array<object>>([])

    const init_echarts = () => {
        echartsList = props.sourceData?.["dataTypeName"] === "母线能耗" ? props.sourceData?.["Mainline_enery"] : props.sourceData?.["dataTypeName"] === "馈线能耗" ? props.sourceData?.["Feedline_enery"] : []
        setEchartsList(echartsList)
        echartsList.forEach((item: object, idx: number) => {
            item["echartsBar"] = echarts.init(document.getElementById("echartsBar" + idx) as HTMLElement)
            draw_echarts(item)
            window.addEventListener("resize", () => {
                item["echartsBar"].resize();
            })
        })
    }
    const draw_echarts = (data: object) => {
        const option = {
            title: {
                text: "能耗 （kW·h）",
                left: 24,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: "#7A8F99"
                },
            },
            tooltip: {
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                formatter(params: object) {
                    return `
                            <div class="${lessModule["echartsBarBox-echartsBar__tooltip"]}">
                                <span>${params["name"]}</span>
                                <div class="${lessModule["echartsBar-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legend"]}"></div>
                                    <div>${params["value"]}</div>
                                </div>
                            </div>`
                },
            },

            grid: {
                top: 40,
                left: 76,
                bottom: 61,
                right: 20,
            },
            xAxis: {
                type: "category",
                data: props.sourceData?.["date"],
                axisLabel: {
                    align: "left",
                    color: "#7A8F99",
                    showMinLabel: true,
                    showMaxLabel: true,
                    margin: 16,
                    formatter: (() => {
                        return (item: object, idx: number) => {
                            const isLast = idx === props.sourceData?.["date"].length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: 3,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
                axisLabel: {
                    color: "#7A8F99",
                },
            },
            series: [
                {
                    data: data?.["data"],
                    // name: "海牵线",
                    type: "bar",
                    stack: "one",
                    barWidth: 20,
                    itemStyle: {
                        //颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 1, color: "rgba(0, 0, 0, 0.5)" },
                            { offset: 0.7, color: "rgba(91, 143, 249, 0.5)" },
                            { offset: 0, color: "rgba(91, 143, 249, 0.9)" },
                        ]),
                        borderColor: "rgba(91, 143, 249, 1)",
                        borderWidth: 1,
                    },
                },
            ],
        };
        data?.["echartsBar"].setOption(option);
    }
   

    // 监听
    useEffect(() => {
   init_echarts()
return ()=>{
    echartsList.forEach((item: object, idx: number) => {
        item["echartsBar"]?.dispose()
    })
}
    }, [props.sourceData])
    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-energyConsumptionStatisticsPageEchartsComponent__energyConsumptionStatisticsPageEchartsComponentEchartsBarComponent"]}`}>
            {
                (props.sourceData?.["dataTypeName"] === "母线能耗" ? props.sourceData?.["Mainline_enery"] : props.sourceData?.["dataTypeName"] === "馈线能耗" ? props.sourceData?.["Feedline_enery"] : []).map((item: object, idx: number) => {
                    return (
                        <div className={`${lessModule["energyConsumptionStatisticsPageEchartsComponent-energyConsumptionStatisticsPageEchartsComponentEchartsBarComponent__echartsBarBox"]}`} key={"echartsList" + idx}>
                            <div className={`${lessModule["energyConsumptionStatisticsPageEchartsComponentEchartsBarComponent-echartsBarBox__label"]}`}>{item["monitor_name"]}</div>
                            <div className={`${lessModule["energyConsumptionStatisticsPageEchartsComponentEchartsBarComponent-echartsBarBox__echartsBar"]}`} id={"echartsBar" + idx} ></div>
                        </div>
                    )
                })
            }
        </div>
    )
}

// 主页-变电站能耗页面-能耗统计页面-图表组件
interface energyConsumptionStatisticsPageEchartsComponentPropsInterface {
    sourceData: object
}
const EnergyConsumptionStatisticsPage_EchartsComponent: React.FC<energyConsumptionStatisticsPageEchartsComponentPropsInterface> = (props) => {
    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-panel"]} ${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-energyConsumptionStatisticsPageEchartsComponent"]}`}
            style={{ width: props.sourceData?.["dataTypeName"] === "总能耗与变压器损耗" ? "calc(100% - 6px - 360px)" : "100%" }}>
            <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-panel__header"]}`}>{props.sourceData?.["dataTypeName"] === "总能耗与变压器损耗" ? "进线电度趋势" : props.sourceData?.["dataTypeName"] === "母线能耗" ? "母线能耗" : props.sourceData?.["dataTypeName"] === "馈线能耗" && "馈线能耗"}</div>
            {
                props.sourceData?.["dataTypeName"] === "总能耗与变压器损耗" ? <EnergyConsumptionStatisticsPage_EchartsComponent_EchartsStackBarComponent sourceData={props.sourceData} /> : <EnergyConsumptionStatisticsPage_EchartsComponent_EchartsBarComponent sourceData={props.sourceData} />
            }
        </div>
    )
}

// 主页-变电站能耗页面-能耗统计页面-右边组件-上边组件
interface energyConsumptionStatisticsPageRightComponentTopComponentInterface {
    sourceData:object
} 
const EnergyConsumptionStatisticsPage_RightComponent_TopComponent: React.FC<energyConsumptionStatisticsPageRightComponentTopComponentInterface> = (props) => {


    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-energyConsumptionStatisticsPageRightComponent__energyConsumptionStatisticsPageRightComponentTopComponent"]}`}>
            <div>总进线电度</div>
            <div className={`${lessModule["energyConsumptionStatisticsPageRightComponent-energyConsumptionStatisticsPageRightComponentTopComponent__value"]}`}>{$ScientificNotation(props.sourceData?.["all_inline"], " ")} kW·h</div>
            {/* <div className={`${lessModule["energyConsumptionStatisticsPageRightComponent-energyConsumptionStatisticsPageRightComponentTopComponent__progressBarBox"]}`}>
                <div className={`${lessModule["energyConsumptionStatisticsPageRightComponentTopComponent-progressBarBox__progressBar"]} ${lessModule["energyConsumptionStatisticsPageRightComponentTopComponent-progressBarBox__progressBarLeft"]}`} style={{ width: `${a / sum * 100}%` }}></div>
                <div className={`${lessModule["energyConsumptionStatisticsPageRightComponentTopComponent-progressBarBox__progressBar"]} ${lessModule["energyConsumptionStatisticsPageRightComponentTopComponent-progressBarBox__progressBarRight"]}`} style={{ width: `${b / sum * 100}%` }}></div>
            </div> */}
            {/* <div className={`${lessModule["energyConsumptionStatisticsPageRightComponent-energyConsumptionStatisticsPageRightComponentTopComponent__label"]}`}>
                <span>海牵线 {a / sum}%</span>
                <span className={`${lessModule["energyConsumptionStatisticsPageRightComponentTopComponent-label__right"]}`}>低压进线电度 {b / sum}%</span>
            </div> */}
        </div>
    )
}

// 主页-变电站能耗页面-能耗统计页面-右边组件-中间组件
const EnergyConsumptionStatisticsPage_RightComponent_centerComponent: React.FC = () => {
    let echartsPie: echarts.ECharts


    const init_echarts = () => {
        echartsPie = echarts.init(document.getElementById("echartsPie") as HTMLElement)
        draw_echarts()
    }
    const draw_echarts = () => {
        const option = {
            title: {
                text: "变压器损耗占比",
                textStyle: {
                    fontSize: 14,
                    fontWeight: 500,
                    color: "#B8D6E6",
                },
            },
            color: [
                "rgba(90,216,166,0.85)",
                "rgba(91, 143, 249, 0.85)",

            ],
            tooltip: {
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                trigger: "item",
                position: "right",
                formatter: (params: object) => {
                    
                    return `
                            <div class="${lessModule["energyConsumptionStatisticsPageRightComponentCenterComponent-echartsPie__tooltip"]}">
                                <span>${params["name"]}</span>
                                <div class="${lessModule["echartsPie-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legend"]} ${lessModule[`tooltip-row__legend${params["dataIndex"]}`]}"></div>
                                    <div>${params["value"]}</div>
                                </div>
                            </div>`
                },
            },
            legend: {
                orient: "vertical",
                selectedMode: false,
                top: 70,
                left: 150,
                align: "left",
                icon: "circle",
                itemWidth: 10,
                itemGap: 20,
                itemWidthHeight: 10,
                textStyle: {
                    color: "#8FB8CC",
                },
            },

            series: [
                {
                    type: "pie",
                    width: 150,
                    center: [66, 97],
                    data: [
                        {
                            value: 70,
                            itemStyle: {
                                borderColor: '#0A1B24',
                                borderWidth: 1
                            },
                            name: "低压进线电度",
                        },
                        {
                            value: 80,
                            itemStyle: {
                                borderColor: '#0A1B24',
                                borderWidth: 1
                            },
                            name: "变压器损耗电度",
                        },
                    ],
                    label: {
                        position: "inside",
                        formatter:
                            "{d}%",
                        color: "#FFFFFF",
                        fontSize: 14,
                    },
                },
            ],
        };
        echartsPie.setOption(option);
    }

    const eventBus_on = () => {
        // 高速名称
        // $eventBus.addListener("eventBus_", (res) => {
        // })
    }
    const eventBus_off = () => {
        // 高速名称
        // $eventBus.removeAllListeners("eventBus_")
    }

    // 初始化
    useEffect(() => {
        init_echarts()

        eventBus_on()
        // 销毁
        return () => {
            eventBus_off()
        }
    }, [])
    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-energyConsumptionStatisticsPageRightComponent__energyConsumptionStatisticsPageRightComponentCenterComponent"]}`}>
            <div className={`${lessModule["energyConsumptionStatisticsPageRightComponent-energyConsumptionStatisticsPageRightComponentCenterComponent__box"]}`}></div>
            <div className={`${lessModule["energyConsumptionStatisticsPageRightComponent-energyConsumptionStatisticsPageRightComponentCenterComponent__echartsPie"]}`} id="echartsPie"></div>
        </div>
    )
}

// 主页-变电站能耗页面-能耗统计页面-右边组件
interface energyConsumptionStatisticsPageRightComponentInterface {
    sourceData:object
}
const EnergyConsumptionStatisticsPage_RightComponent: React.FC<energyConsumptionStatisticsPageRightComponentInterface> = (props) => {
    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-panel"]} ${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-energyConsumptionStatisticsPageRightComponent"]}`}>
            <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage-panel__header"]}`}>变压器损耗</div>
            <EnergyConsumptionStatisticsPage_RightComponent_TopComponent sourceData={props.sourceData}/>
            <EnergyConsumptionStatisticsPage_RightComponent_centerComponent />
        </div>
    )
}

// 主页-变电站能耗页面-能耗统计页面
const HomePage_SubstationEnergyConsumptionPage_EnergyConsumptionStatisticsPage: React.FC = () => {
    const [sourceData, setSourceData] = useState<object>({})
    const eventBus_on = () => {
        // 变电站能耗筛选数据
        $eventBus.addListener("eventBus_homePageSubstationEnergyConsumptionPageenergyConsumptionStatisticsData", (res) => {
            setSourceData(res)
        })
    }
    const eventBus_off = () => {
        // 变电站能耗筛选数据
        $eventBus.removeAllListeners("eventBus_homePageSubstationEnergyConsumptionPageenergyConsumptionStatisticsData")
    }

    useEffect(() => {
        eventBus_on()
        return () => {
            eventBus_off()
        }
    }, [])
    return (
        <div className={`${lessModule["homePageSubstationEnergyConsumptionPageEnergyConsumptionStatisticsPage"]}`}>
            <EnergyConsumptionStatisticsPage_EchartsComponent sourceData={sourceData} />
            {
                sourceData["dataTypeName"] === "总能耗与变压器损耗" && <EnergyConsumptionStatisticsPage_RightComponent sourceData={sourceData} />
            }
        </div>
    )
}

export default HomePage_SubstationEnergyConsumptionPage_EnergyConsumptionStatisticsPage